<template>
  <div>
    <el-card>
      <el-breadcrumb separator="/">
        <el-breadcrumb-item :to="{ path: '/home' }">首页</el-breadcrumb-item>
        <el-breadcrumb-item>商品管理</el-breadcrumb-item>
        <el-breadcrumb-item>商品评论</el-breadcrumb-item>
      </el-breadcrumb>
      <el-row type="flex" justify="space-between">
        <el-col :span="10">
          <el-button size="small" icon="el-icon-check" plain @click="updateComment(2)">审核通过</el-button>
          <el-button size="small" icon="el-icon-upload2" plain @click="updateComment(1)">置顶</el-button>
          <el-button size="small" icon="el-icon-download" plain @click="updateComment(0)">取消置顶</el-button>
          <el-button size="small" icon="el-icon-delete" plain @click="deleteProductComm">删除</el-button>
          <el-button size="small" icon="el-icon-plus" @click="addTitle">导表</el-button>
        </el-col>
        <el-col :span="4">
          <el-select class="btn_top" v-model="product_id" @change="selectProduct" filterable clearable placeholder="请选择"
            size="small">
            <el-option v-for="item in productList" :key="item.productId" :label="item.productName"
              :value="item.productId"></el-option>
          </el-select>
        </el-col>
      </el-row>
      <el-table :data="dataList" @selection-change="selectChange" border style="width: 100%;margin-top: 8px;"
        height="640" :header-cell-style="{ background: '#409EFF', color: '#FFF' }">
        <el-table-column type="selection"></el-table-column>
        <el-table-column label="标识" prop="commentId" width="60"></el-table-column>
        <el-table-column label="商品名称">
          <template slot-scope="scope">
            {{ scope.row.productId | productNameFilter }}
          </template>
        </el-table-column>
        <el-table-column prop="userId" label="用户ID"></el-table-column>
        <el-table-column prop="commentContent" label="评论内容"></el-table-column>
        <el-table-column label="审核状态">
          <template slot-scope="scope">
            <el-tag type="danger" v-if="scope.row.commentStatus == '0'">未审核</el-tag>
            <el-tag v-else-if="scope.row.commentStatus == '1'">已审核</el-tag>
          </template>
        </el-table-column>
        <el-table-column label="是否置顶">
          <template slot-scope="scope">
            <el-tag type="danger" v-if="scope.row.topping == '0'">否</el-tag>
            <el-tag v-else-if="scope.row.topping == '1'">是</el-tag>
          </template>
        </el-table-column>
        <el-table-column label="满意度">
          <template slot-scope="scope">
            <el-tag v-if="scope.row.commentStar == '1'">一星</el-tag>
            <el-tag v-else-if="scope.row.commentStar == '2'">二星</el-tag>
            <el-tag v-else-if="scope.row.commentStar == '3'">三星</el-tag>
            <el-tag v-else-if="scope.row.commentStar == '4'">四星</el-tag>
            <el-tag v-else-if="scope.row.commentStar == '5'">五星</el-tag>
          </template>
        </el-table-column>
        <el-table-column prop="commentDate" label="时间"></el-table-column>
      </el-table>
      <div class="pagination-control">
        <el-pagination :page-sizes="[20, 50, 80, 100]" :page-size="pageSize"
          layout="total, sizes, prev, pager, next, jumper" :total="totalCount" @size-change="sizeChange"
          @current-change="currentChange"></el-pagination>
      </div>

      <el-dialog title="导表" :visible.sync="addDialogVisible" width="30%">
        <el-form ref="formRef" :model="formData" class="send-dialog-form">
          <el-form-item prop="file" ref="uploadRef" label="导表">
            <el-upload class="upload-demo" action="aa" :on-remove="fileRemove" :on-change="fileChange"
              :auto-upload="false" name="file" accept=".xls" :limit="1" ref="addFile">
              <el-button size="small" type="primary">点击上传</el-button>
              <div slot="tip" class="el-upload__tip">*请上传xls文件</div>
            </el-upload>
          </el-form-item>
        </el-form>
        <span slot="footer" class="dialog-footer">
          <el-button type="primary" @click="cancelBox">取消</el-button>
          <el-button type="primary" @click="submitComment">确 定</el-button>
        </span>
      </el-dialog>
    </el-card>
  </div>
</template>

<script>
let that
import {
  getComment,
  listProduct,
  updateComment,
  deleteProductComm,
  zhidingComment,
  importComment
} from "../../network/product";


export default {
  data() {
    return {
      dataList: [],
      productList: [],
      checkList: [],
      product_id: 0,
      pageNumber: 1,
      pageSize: 20,
      totalCount: 0,
      addDialogVisible: false,
      formData: {
        cover: ""
      }
    };
  },
  components: {},
  methods: {
    fileRemove(file, fileList) {
      this.$refs.addFile.clearFiles();
      this.formData = {
        cover: ""
      };
    },
    fileChange(file, fileList) {
      this.formData.cover = file.raw;
    },
    submitComment() {
      let fd = new FormData();
      console.log(this.formData.cover);
      fd.append("file", this.formData.cover);
      importComment(fd).then(res => {
        console.log(res);
        if (res.flag) {
          this.getCommentary();
          this.cancelBox();
          this.$message.success("上传成功");
        } else {
          console.log(res);
          this.$message.success("上传失败");
        }
      });
    },
    cancelBox() {
      this.addDialogVisible = false;
      this.$refs.formRef.resetFields();
      this.$refs.addFile.clearFiles();
      this.formData = {
        cover: ""
      };
    },
    addTitle() {
      this.addDialogVisible = true;
    },
    getCommentary() {
      getComment({
        productId: this.product_id == 0 ? '' : this.product_id,
        page: this.pageNumber,
        size: this.pageSize,
      })
        .then(res => {
          console.log(res);
          this.dataList = res.data.list;
          this.totalCount = res.data.total;
        })
        .catch(err => {
          console.log(err);
        });
    },
    selectProduct(val) {
      this.pageNumber = 1;
      this.totalCount = 0;
      this.product_id = val;
      this.getCommentary();
    },
    //每页N条发生改变
    sizeChange(val) {
      this.pageSize = val;
      this.loading = true;
      this.getCommentary();
    },
    // 页码发生改变
    currentChange(val) {
      this.pageNumber = val;
      this.loading = true;
      this.getCommentary();
    },
    selectChange(val) {
      this.checkList = val;
    },
    updateComment(flag) {
      if (this.checkList.length === 0) {
        return this.$message.warning("请勾选要审核的数据");
      }
      let comment_id = "";
      for (let i = 0; i < this.checkList.length; i++) {
        comment_id += this.checkList[i].commentId + ",";
      }

      if (flag == 2) {
        updateComment({
          ids: comment_id,
        })
          .then(res => {
            console.log(res);
            if (res.flag) {
              this.getCommentary();
              this.$message.success("审核成功");
            } else {
              this.$message.error("审核失败");
            }
          })
          .catch(error => {
            console.log(error);
          });
      } else {
        zhidingComment({
          ids: comment_id,
          topping: flag
        })
          .then(res => {
            console.log(res);
            if (res.flag) {
              this.getCommentary();
              this.$message.success("操作成功");
            } else {
              this.$message.error("操作失败");
            }
          })
          .catch(error => {
            console.log(error);
          });
      }

    },
    deleteProductComm() {
      if (this.checkList.length === 0) {
        return this.$message.warning("请勾选要删除的数据");
      }
      let comment_id = "";
      for (let i = 0; i < this.checkList.length; i++) {
        comment_id += this.checkList[i].commentId + ",";
      }
      console.log(comment_id);
      deleteProductComm({
        ids: comment_id,
      })
        .then(res => {
          console.log(res);
          if (res.flag) {
            this.getCommentary();
            this.$message.success("删除成功");
          } else {
            this.$message.error("删除失败");
          }
        })
        .catch(error => {
          console.log(error);
        });
    },
    // 获取全部商品
    getProductList() {
      listProduct({
        shopId: '0',
        size: 500,
        page: 1,
        productName: '',
        productStatus: '-1'
      }).then(res => {
        console.log(res);
        if (res.flag) {
          res.data.list.unshift({
            productId: 0,
            productName: '全部评论'
          })
          this.productList = res.data.list;
        }
      })
    },
  },
  created() {
    this.getProductList();
    this.getCommentary();

    that = this
  },
  filters: {
    productNameFilter(val) {
      console.log(val);
      var name = ''
      that.productList.forEach(ele => {
        if (ele.productId == val) {
          name = ele.productName
        }
      })
      return name
    }
  },
};
</script>

<style scoped>
.dn {
  display: none;
}
</style>
